// 实现confirm一样的功能
// msgbox("确定要删除这条记录吗？", "是", "否").then(function(result) {
//     // 在这里处理确认对话框返回的结果
//     console.log(result);
//     $('.msgbox-modal').remove()
// });
var msgbox = (function () {

    function init() {
        var styles = document.createElement("style");
        styles.textContent = `

    .msgbox-modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .msgbox-contianer {
        width: 50%;
        height: 50%;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border-radius: 11px;
        box-shadow: 0 0 10px rgb(0 0 0 / 50%);
        
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    .msgbox-title {
        text-align: center;
        margin: 10px 0;
    }

    .msgbox-contianer button {
        padding: 13px;
        background-color: #fff;
        color: #000;
        border-radius: 5px;
        cursor: pointer;
        border: none;
        box-shadow: 0 0 5px 1px #fff, 0 0 5px 1px rgb(0 0 0 / 50%);
        margin: 0 10px;
    }

    .msgbox-contianer button:hover {
        background-color: rgba(139, 196, 230,.5);
        color: #fff;
    }
  `;

        // create the message box elements
        var modal = document.createElement("div");
        modal.classList.add("msgbox-modal");

        var container = document.createElement("div");
        container.classList.add("msgbox-contianer");

        var title = document.createElement("h3");
        title.classList.add("msgbox-title");
        title.textContent = "消息";

        var buttonContainer = document.createElement("p");

        var yesButton = document.createElement("button");
        yesButton.classList.add("msgbox-yes");
        yesButton.textContent = "确定";

        var noButton = document.createElement("button");
        noButton.classList.add("msgbox-no");
        noButton.textContent = "取消";

        // assemble the message box
        buttonContainer.appendChild(yesButton);
        buttonContainer.appendChild(noButton);

        container.appendChild(title);
        container.appendChild(buttonContainer);

        modal.appendChild(container);

        document.body.appendChild(modal)
        document.head.appendChild(styles);
    }

    function msgbox(txt, yestxt, notxt) {

        init()
        var doms = {
            msgboxModal: $('.msgbox-modal'),
            msgboxContianer: $('.msgbox-contianer'),
            msgboxTitle: $('.msgbox-title'),
            msgboxYes: $('.msgbox-yes'),
            msgboxNo: $('.msgbox-no')
        }

        doms.msgboxTitle.innerHTML = txt
        doms.msgboxYes.innerHTML = yestxt
        doms.msgboxNo.innerHTML = notxt

        return new Promise(function (resolve, reject) {
            // 事件
            function _yes(e) {
                doms.msgboxModal.remove()
                resolve(true)
            }
            function _no(e) {
                doms.msgboxModal.remove()
                resolve(false)
            }
            doms.msgboxYes.addEventListener('click', _yes)
            doms.msgboxNo.addEventListener('click', _no)
        })

    }
    return msgbox
})()

